<template>
  <div class="rights-container">
    <div class="header">此功能需要购买{{packages.name}}才可使用</div>
    <rights-list class="rights-section" isWhite :packages="packages">
      <div slot="header" class="rights-packages">- 购买{{packages.name}}，享有以下{{packages.rights&&packages.rights.length}}项专属权益 -</div>
    </rights-list>
    <footer>
      <el-button class="btn-w150 btn-h36 has-radius"
        type="success"
        @click="goPurchase">购买权益包</el-button>
    </footer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { isPassVersion } from '@/utils/judge'
import RightsList from '@/components/member/rights-list'
import { getPackageByPid } from '@/api/rights'
import { getCidByPkg } from '@/utils/costum'
export default {
  name: 'Rights',
  components: { RightsList },
  data () {
    return {
      packages: {}
    }
  },
  computed: {
    ...mapGetters(['appInfo'])
  },
  created () {
    this.pkgid = this.$route.query.pkgid || '10000'
    this.getPackages()
    this.$xz('xz_page_load_finished', 'XZDesktopVIP')
  },
  methods: {
    getPackages () {
      getPackageByPid({ pid: this.pkgid }).then(res => {
        const data = res.data.data || {}
        data.rights = (data.rights || []).filter(item => {
          return isPassVersion(item.min_ver)
        })
        this.packages = data
      })
    },
    goPurchase () {
      if (this.appInfo.appID === '22') {
        const cid = getCidByPkg(this.packages.pkg_id)
        if (isPassVersion('3.0.2')) {
          this.$xz('xz_switch_dialog', 'XZDesktopOrderVIP', true, JSON.stringify({ cid, pkgid: this.packages.pkg_id }))
        } else {
          this.$xz('xz_switch_dialog', 'XZDesktopOrderVIP', true)
        }
      } else {
        this.$xz('xz_switch_dialog', 'XZDesktopVIP', false)
        this.$xz('xz_switch_dialog', 'XZMainWindow', true)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.rights-container {
  width: 100%;
  height: 100%;
  padding: 25px 50px 30px;
  color: #333;
  font-size: 12px;
  background: #fff;
}
.header {
  font-size: 14px;
  text-align: center;
}
.rights-packages {
    padding-top: 16px;
    padding-bottom: 18px;
    color: #d8a04b;
    font-size: 16px;
    text-align: center;
  }
.rights-section{
  padding-bottom: 26px;
}
footer {
  width: 100%;
  text-align: center;
}
</style>
